<template>
  <div>
    <!-- header 标题栏 -->
    <div class="a" style="width:200px;height:200px;">
      <div class="block">
        <el-image src="http://static.wdmcake.cn/public/wap/home/img/logo.png"></el-image>
      </div>
    </div>
    <!-- 表单组件 -->
    <mt-field
      class="sjh"
      type="text"
      placeholder="请输入手机号"
      v-model="name"
      :state="nameState"
      @blur.native.capture="checkName"
      label="用户名:"
    ></mt-field>
    <mt-field
      class="mm"
      type="password"
      placeholder="请输入密码"
      v-model="pwd"
      :state="pwdState"
      @blur.native.capture="checkPwd"
      label="密码:"
    ></mt-field>
    <br /><br />
    <router-link to="/register" class="zc">新用户/注册</router-link>
    <br /><br />
    <mt-button size="large" type="primary" class="dl"> 安全登录 </mt-button>

    <!-- 底部选项卡 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="home">
        <img
          v-if="selected == 'home'"
          src="@/assets/common/001.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/002.png" alt="" slot="icon" />
        首页</mt-tab-item
      >
      <mt-tab-item id="liebiao">
        <img
          v-if="selected == 'liebiao'"
          src="@/assets/common/003.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/004.png" alt="" slot="icon" />
        分类</mt-tab-item
      >
      <mt-tab-item id="shop">
        <img
          v-if="selected == 'shop'"
          src="@/assets/common/005.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/009.png" alt="" slot="icon" />
        购物车</mt-tab-item
      >
      <mt-tab-item id="me">
        <img
          v-if="selected == 'me'"
          src="@/assets/common/010.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/008.png" alt="" slot="icon" />
        我的</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navactive: "1",
      selected: "me",
      src: "/images/logo.png",
      name: "", // 绑定用户名文本框的value
      nameState: "", // 定义用户名文本框的状态
      pwd: "",
      pwdState: "",
    };
  },
  watch: {
    selected(newValue, oldValue) {
      console.log(newValue);
      if (newValue == "home") {
        this.selected = "me";
        this.$router.push("/");
      }else if (newValue == "shop") {
        this.selected = "me";
        this.$router.push("/shop");
      }else if (newValue == "liebiao") {
        this.selected = "me";
        this.$router.push("/liebiao");
      }
    },
  },
  methods: {
    checkName() {
      // 验证表单
      let reg = /^\w{6,15}$/;
      if (reg.test(this.name)) {
        this.nameState = "success";
        console.log("登录成功");
      } else {
        this.nameState = "error";
        console.log("登录失败");
      }
    },
    checkPwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd)) {
        this.pwdState = "success";
        console.log("面登录成功");
      } else {
        this.pwdState = "error";
        console.log("面登录失败");
      }
    },
  },
};
</script>

<style scoped>
.zc {
  float: right;
  margin-right: 10%;
}
.sjh {
  border-bottom: 2px solid pink;
  width: 350px;
  margin: 0 auto;
}
.mm {
  border-bottom: 2px solid pink;
  width: 350px;
  margin: 0 auto;
}
.dl {
  width: 350px;
  margin: 0 auto;
  background-color: pink;
}
.block {
  position: absolute;
  left: 33%;
  top: 15%;
}
.link {
  color: white;
}
</style>